<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--
        hr:horizontal水平线标签
        常用属性:
            color属性
                为当前的水平线赋予指定的颜色
            width属性
                指定当前水平线的宽度,即当前水平线有多长
                可以给固定值(通过像素单位指定),也可以给百分比
                如果没有占100%,则默认居中
            align属性
                当前水平线的对齐方式,默认居中
                值有:left、center、right
            size属性
                指定当前水平线的厚度

    -->
    <hr color="red" width="100px" align="left" size="20px">
    <hr color="green" width="50%" align="left" size="10px">

    <!--
        通过css样式的方式来设置样式
        width:宽度
        height:高度
        background:背景颜色
    -->

    <!--50%相对于父元素宽度的百分比-->
    <div style="width:600px;height:300px;background:yellowgreen;"  >
        <div style="width:50%;height:300px;background:hotpink;">
            <hr width="50%" color="blue" align="left" size="20">
        </div>
    </div>
</body>
</html>